<include file="Public:js" />
<div class="page-group">
    <div class="page" data-page="book_kind" style="background: #FFF">
    <header class="bar bar-nav">
        <a onclick="window.history.go(-1);"class="icon" style="width: 40%">
            <img src="/wechat/img/iconfont_back@2x.png" class="back_img">
        </a>
    </header>
    <div class="content" style="">
    	<div style="display:inline-block;width: 100%;padding: 5% 6px 4px;">
    		<input type="text" id='search'  class="border_radius"
    		  placeholder="请输入搜索关键字" value="{:I("get.keyword")}"
    		 style="float:left;width: 80%;box-sizing:border-box;  -moz-box-sizing:border-box; /* Firefox */ -webkit-box-sizing:border-box;border:1px solid #F1F1F1;height:30px"/>
    		<input type="button"   value="搜索" class="btn_radius" style="float:left;width: 20%;padding: 0;margin: 0;box-sizing:border-box; -moz-box-sizing:border-box; /* Firefox */ -webkit-box-sizing:border-box;border:1px solid #F5F5F5;height:30px;    color: #f1f1f1;    background: #ec623e;" onclick="search()"/>
    	</div>
        <volist name="up" id="vo">
            <div class="waterfall book_rec_div book_kinds">
                <h5 class="color_book_kind_titile">{$vo.name}</h5>
                <ul class="book_kind" id="book_kind_{$vo.type_id}">
                    <volist name="type" id="v">
                        <if condition="$vo['type_id'] eq $v['pid']">
                            <li  data-value="{$v.type_id}">
                                {$v.name}
                            </li>
                        </if>
                    </volist>
                </ul>
            </div>
        </volist>
        <div style="width: 100%;padding: 6px">
        		<input type="button" style="width: 100%;padding:8px;border: none;background: #ec623e;color: #f1f1f1;margin-top: 0rem;border-radius: 0.2rem;" value="确认筛选" onclick="choose()">
        </div>
    </div>
</div>
</div>
<script>

    $(".book_kind li").each(function(){
        $(this).click(function(){
            if($(this).parent().find('li.active').attr('data-value')==$(this).attr('data-value')){
                $(this).removeClass('active');
            }else{
                $(this).parent().find('li').removeClass('active');
                $(this).addClass("active");
            }
        })
    });

	function choose(){
        var aa=getTypeStr();
		if(aa.length<1){
			$.alert("至少选择一项分类");
			$(".book_kind li").removeClass("active");
		}else{
            window.location.href='{:U("Book/blist")}'+'?type='+aa;
		}
	}

    function getTypeStr(){
        var aa=[];
        $(".book_kind li.active").each(function(){
            aa.push($(this).attr("data-value"));
        });
        return aa;
    }

    function search(){
        var v=$("#search").val();
        window.location.href='{:U("Book/blist")}'+'?keyword='+v;
    }
</script>
</body>
</html>